<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ProxyBroadcast</title>
    <link
      rel="shortcut icon"
      type="image/x-icon"
      href="/examples/public/favicon.ico"
    />
    <link rel="stylesheet" href="../css/common.css" />
  </head>

  <style>
    #app {
      width: 100%;
      height: 100%;
    }
  </style>

  <body>
    <div id="app"></div>

    <script type="module">
      import * as THREE from "three";
      import * as Vis from "../../dist/Vis.es.js";

      const proxyBroadcast = new Vis.ProxyBroadcast();

      const testObject = {
        string: "string",
        number: 1,
        boolean: true,
        object: {
          attr1: "adv",
        },
        array: [1, { a: 3 }, [1, 3, 5, 7], 4, 5],
      };

      const reactiveObject = proxyBroadcast.proxyExtends(testObject);

      proxyBroadcast.addEventListener("broadcast", (event) => {
        console.log(event.notice);
      });

      window.reactiveObject = reactiveObject;
    </script>
  </body>
</html>
